<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<el-col :span="4" class="userinfo">
				<div class="el-dropdown-link userinfo-inner">
				    <img src="../assets/logo.png" />
				</div>
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
				    <span class="el-dropdown-link">
				        {{sysUserName}}
				        <i class="el-icon-caret-bottom"></i>
				    </span>
				    <el-dropdown-menu slot="dropdown">
				        <el-dropdown-item>
				        	<el-button type="text" @click="dialogVisible = true">修改密码</el-button>
				        </el-dropdown-item>
				        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
				    </el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path"  class="el-menu-vertical-demo" unique-opened router>
					<el-menu-item >
					  <i class="el-icon-star-on"></i>
					  <span slot="title">首页</span>
					</el-menu-item>
					<template v-for="(item,index) in List">
						<el-submenu :index="index+''">
							<template slot="title">
								<i v-if="index == 0" class="el-icon-s-fold"></i>
								<i v-else-if="index == 1" class="el-icon-s-custom"></i>
								<i v-else-if="index == 2" class="el-icon-video-camera"></i>
								<i v-else-if="index == 3" class="el-icon-shopping-cart-2"></i>
								<i v-else-if="index == 4" class="el-icon-s-shop"></i>
								<i v-else-if="index == 5" class="el-icon-s-order"></i>
								<i v-else-if="index == 6" class="el-icon-grape"></i>
								<i v-else-if="index == 7" class="el-icon-s-operation"></i>
								<i v-else-if="index == 8" class="el-icon-s-tools"></i>
								<span>{{item.menu_name}}</span>
							</template>
							<el-menu-item  v-for="(children,index) in item.child" :key="index" :index="'./Main'" @click="addTab(children.id,children.menu_name,children.menu_url)">{{children.menu_name}}</el-menu-item>
						</el-submenu>
					</template>
				</el-menu>
			</aside>
			
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-tabs v-model="editableTabs" type="card" closable @tab-remove="removeTab">
						<el-tab-pane v-for="item in editableTabsPane" :key="item.name" :label="item.title" :name="item.name">
							<component :is="item.component"></component>
						</el-tab-pane>
					</el-tabs>
				</div>
			</section>
		</el-col>
		<!-- 修改密码 -->
		<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm" class="form">
				<el-form-item label="用户名" prop="realName">
					<el-input v-model="this.sysUserName" auto-complete="off" style="border: 0;" disabled></el-input>
				</el-form-item>
				<el-form-item label="原密码" prop="oldPwd">
					<el-input v-model="addForm.oldPwd" placeholder="请输入原密码" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="pwd">
					<el-input v-model="addForm.pwd" placeholder="请输入新密码" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -30px;">
				<el-button type="primary" size="small"  @click.native="addSubmit"  :loading="addLoading">保存</el-button>
			</div>
		</el-dialog>
	</el-row>
</template>

<script>
	import {
		menuList,
		getUserInfo,
		editPwd,
		Refreshtoken
	} from '../api/api';
	const Index = resolve => require(['./system/Index'], resolve)
	export default {
		data() {
			return {
				timer: null,
				List: [],
				ind:'',
				sysName: '吉柚视频后台管理',
				collapsed: false,
				sysUserName: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				editableTabs: 'home',
				editableTabsPane: [{
				    title: '首页',
					name: 'home',
					close: false,
					component: Index
				}],
				tabIndex: 1,
				dialogVisible: false,
				addLoading: false,
				addForm: {
					pwd: '',
					oldPwd: '',
				},
				addFormRules: {
					oldPwd: [{
						required: true,
						message: '请输入原密码',
						trigger: 'blur'
					}],
					pwd: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}]
				},
			}
			
		},
		mounted() {
			var Token = sessionStorage.getItem('Token');
			var timestamp=new Date().getTime();
			var loginParams = { token: Token, timestamp:timestamp };
			menuList(loginParams).then(res => {
				this.logining = false;
				var res = res.data;
				if (res.code != 0) {
					this.$message({
						message: res.message,
						type: 'error'
					});
				} else {
					this.List = res.data;
				}
			});
			// 用户信息
			getUserInfo(loginParams).then(data => {
				this.logining = false;
				var res = data.data;
				if (res.code != 0) {
					this.$message({
						message: res.message,
						type: 'error'
					});
				} else {
					this.sysUserName = res.data.userName;
					sessionStorage.setItem('IP', res.data.ipAddr);
				}
			});
			this.queryInfo();
			this.timer = setInterval(() => {
			   setTimeout(this.queryInfo, 0)
			}, 600000)
			
		},
		methods: {
			handleCommand(command) {
			    if (command == 'loginout') {
			        localStorage.removeItem('ms_username');
			        this.$router.push('/login');
			    }
			},
			isActive(route) {
			  return route.path === this.$route.path || route.name === this.$route.name
			},
			// 刷新token
			queryInfo() {
				var Token = sessionStorage.getItem('Token');
				var timestamp=new Date().getTime();
				let para = {token: Token,timestamp: timestamp};
				Refreshtoken(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.loading = false;
					}
				});
			},
			// 修改密码
			handleClose(done) {
				this.$confirm('确认关闭？')
				    .then(_ => {
						done();
					})
					.catch(_ => {});
			},
			addSubmit: function() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp=new Date().getTime();
							let para =Object.assign({ token: Token, timestamp:timestamp,}, this.addForm);
							editPwd(para).then((res) => {
								var res = res.data;
								if (res.code != 0) {
									this.$message({
										message: res.message,
										type: 'error'
									});
								}else{
									this.addLoading = false;
									this.$message({
										message: '提交成功',
										type: 'success'
									});
									this.$refs['addForm'].resetFields();
									this.dialogVisible = false;
									this.queryInfo();
								}
								
							});
						});
					}
				});
			},
			//退出登录
			logout: function() {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {

				});
			},
			//折叠导航栏
			collapse: function() {
				this.collapsed = !this.collapsed;
			},
			// tab标签页
			addTab(id,targetName,url) {
				let Path = resolve => require(['./pages'+url], resolve)
			    var type = 0;
			    var ttname = "";
			    let tabs = this.editableTabsPane;
			    tabs.forEach((tab, index) => {
			        if (tab.title === targetName) {
			            type=1;
			            ttname=tab.name;
			        }
			    });
				
			    if(type==1){
			        this.editableTabs = ttname;
			        // $router.push(child.path);
				}else if(type==0){
			        let newTabName = ++this.tabIndex + '';
					this.editableTabsPane.push({
					    title: targetName,
					    name: targetName,
						component: Path
					});
			        
			        this.editableTabs = targetName;
			        // $router.push(child.path);
				}else{
			        console.log("标签类型错误");
				}
			
			
			},
			removeTab(targetName) {
			    let tabs = this.editableTabsPane;
			    let activeName = this.editableTabs;
			    if (activeName === targetName) {
			        tabs.forEach((tab, index) => {
			            if (tab.name === targetName) {
			                let nextTab = tabs[index + 1] || tabs[index - 1];
			                if (nextTab) {
			                    activeName = nextTab.name;
			                }
			            }
			        });
			    }
			
			    this.editableTabs = activeName;
			    this.editableTabsPane = tabs.filter(tab => tab.name !== targetName);
			},
		},
		
		beforeDestroy() {
		  clearInterval(this.timer);        
		  this.timer = null;
		}
	}
</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.el-dropdown-link{
		color: #fff;
	}
	.form{
		margin-top: -20px;
		margin-right: 10px;
		border-top: 1px solid #eee;
		padding-top: 20px;
	}
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;

		.header {
			height: 60px;
			line-height: 60px;
			background-image: linear-gradient(45deg, #1278f6, #00b4aa 50%, #1278f6);
			// background: $color-primary;
			color: #fff;

			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;

				.userinfo-inner {
					cursor: pointer;
					color: #fff;

					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}

			.logo {
				//width:230px;
				height: 60px;
				font-size: 22px;
				padding-left: 20px;
				padding-right: 20px;
				border-color: rgba(238, 241, 146, 0.3);
				border-right-width: 1px;
				border-right-style: solid;

				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}

				.txt {
					color: #fff;
				}
			}

			.logo-width {
				width: 230px;
			}

			.logo-collapse-width {
				width: 60px
			}

			.tools {
				padding: 0px 23px;
				width: 14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}

		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			// overflow: hidden;

			aside {
				flex: 0 0 230px;
				width: 230px;

				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu {
					height: 100%;
				}

				.collapsed {
					width: 60px;

					.item {
						position: relative;
					}

					.submenu {
						position: absolute;
						top: 0px;
						left: 60px;
						z-index: 99999;
						height: auto;
						display: none;
					}

				}
			}

			.menu-collapsed {
				flex: 0 0 60px;
				width: 60px;
			}

			.menu-expanded {
				flex: 0 0 230px;
				width: 230px;
			}

			.content-container {
				// background: #f1f2f7;
				flex: 1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;

				.breadcrumb-container {

					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}

					.breadcrumb-inner {
						float: right;
					}
				}

				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
